<template>
  <div id="app">
    <!-- 文本插值 -->
    <h2>文本插值</h2>
    <p>消息: {{ msg }}</p>
    <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>

    <!-- 属性绑定 -->
    <h2>属性绑定</h2>
    <div :id="dynamicId">动态 ID (使用 v-bind 简写)</div>
    <button :disabled="isButtonDisabled">按钮 ({{ isButtonDisabled ? '禁用' : '启用' }})</button>
    <div v-bind="objectOfAttrs">动态绑定多个属性</div>

    <!-- 使用 JavaScript 表达式 -->
    <h2>JavaScript 表达式</h2>
    <p>{{ number + 1 }}</p>
    <p>{{ ok ? '是' : '否' }}</p>
    <p>格式化日期: {{ formatDate(date) }}</p>

    <!-- 指令 -->
    <h2>指令</h2>
    <p v-text="'通过 v-text 设置的文本内容'"></p>
    <p v-html="'通过 <strong>v-html</strong> 设置的 HTML 内容'"></p>
    <input v-model="msg" placeholder="编辑我以更新 msg" />
    <p>v-model 绑定的值: {{ msg }}</p>

    <div v-if="isVisible">v-if: 这部分内容可见</div>
    <div v-else>v-else: 这部分内容隐藏</div>

    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>

    <button @click="increment">点击我 (计数: {{ count }})</button>
    <form @submit.prevent="onSubmit">
      <button type="submit">提交表单 (使用 .prevent)</button>
    </form>

    <div v-show="isShown">v-show: 动态切换显示状态</div>
    <div v-pre>{{ 这部分内容不会被编译 }}</div>
    <div v-cloak>这部分内容会在编译完成后显示</div>

    <!-- 动态参数 -->
    <h2>动态参数</h2>
    <a :[attributeName]="url">动态属性名称</a>
    <button @[eventName]="handleEvent">动态事件名称</button>

    <!-- 修饰符 -->
    <h2>修饰符</h2>
    <form @submit.prevent="onSubmit">表单提交 (使用 .prevent 修饰符)</form>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 文本插值
const msg = ref('你好 Vue!')
const rawHtml = ref('<strong>这是原始 HTML</strong>')

// 属性绑定
const dynamicId = ref('dynamic-id')
const isButtonDisabled = ref(true)
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color: lightblue; padding: 10px;',
}

// JavaScript 表达式
const number = ref(41)
const ok = ref(true)
const date = ref(new Date())

// 列表渲染和条件渲染
const isVisible = ref(true)
const items = ref(['项目 1', '项目 2', '项目 3'])
const count = ref(0)

// 动态参数
const attributeName = ref('href')
const url = ref('https://vuejs.org')
const eventName = ref('click')

// 方法
function formatDate(date) {
  return date.toLocaleDateString()
}

function increment() {
  count.value++
}

function onSubmit() {
  alert('表单已提交！')
}

function handleEvent() {
  alert('动态事件触发！')
}

// 显示/隐藏状态
const isShown = ref(true)
</script>

<style>
[v-cloak] {
  display: none;
}
</style>
